<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .flex-container{
            position:fixed;
            width:100%;
            z-index: 100;
            display:flex;
            flex-wrap: wrap;
        }
        .flex-item{
            height:100px;
            flex:0 33.33%;
            background:blue;
        }
        .flex-item:nth-child(even){
            background:#ccc;
        }
    </style>
</head>

<body style="background:#fff;">
    <canvas id="canvas" style="width:100%; height:100%; position:fixed;"></canvas>

    <script src="../dist/easy-canvas.min.js"></script>
    <script src="./draw.js"></script>
    <script>
        window.onload = function () {
            main()

        }
        window.onresize = function () {
            main()
        }

        const host = 'https://gitjinfeiyang.github.io/easy-canvas/example/'
        const examples = [
            { title: 'Basic', desc: '基本布局', url: 'basic.html' },
            { title: 'Table', desc: '在渲染5000行数据、40000个元素下滚动', url: 'table.html' },
            { title: 'Image 图片', desc: '图片缩放类型', url: 'image.html' },
            { title: 'Components 组件库', desc: 'UI组件库示例', url: 'ui.html' },
            { title: 'Event 事件', desc: '事件监听', url: 'event.html' },
            { title: 'Custom render 自定义render', desc: '自定义render，操作ctx绘图', url: 'custom-render.html' },
            { title: '"Dom" 操作element', desc: '类似修改dom的能力', url: 'change-element.html' },
            { title: 'Demo', desc: '展示了滚动、事件、flex布局、文本换行对齐等能力', url: 'test.html' },
            { title: 'Test', desc: '测试用', url: 'test1.html' },
        ]

        function main() {
            const canvas = document.querySelector('#canvas')

            const ctx = canvas.getContext('2d')
            const dpr = window.devicePixelRatio
            const w = window.innerWidth
            const h = window.innerHeight
            canvas.width = w * dpr
            canvas.height = h * dpr
            ctx.scale(dpr, dpr)
            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h,animate:true })

            const background = 'https://tse1-mm.cn.bing.net/th/id/OIP.Dkj8fnK1SsPHIBmAN9XnUAHaNK?pid=Api&rs=1'
            const node = easyCanvas.createElement((h) => {
                const list = examples.map(item => {
                    return h('view', {
                        data: item,
                        on: {
                            click(e) {
                                window.location.href = host + item.url
                            },
                            touchstart(e){
                                e.currentTarget.setStyles({
                                    backgroundColor:'#f5f5f5'
                                })
                            },
                            touchend(e){
                                e.currentTarget.setStyles({
                                    backgroundColor:'#fff'
                                })
                            }
                        },
                        styles: {
                            backgroundColor: '#fff',
                            padding: [10,20],
                            margin:[5,10],
                            borderRadius:8
                        }
                    }, [
                        h('view', { styles: { color: '#333', fontSize: 18, fontWeight: 800, display: 'flex', alignItems: 'center' } }, [
                            h('view', { styles: { flex: 1 } }, [h('text', { styles: {} }, item.title),]),
                            h('image', { styles: { width: 30 }, attrs: { src: './images/arrow-right.png' } })
                        ]),
                        h('view', { styles: { color: '#999' } }, [h('text', {}, item.desc)])
                    ])
                })
                return h('view',{
                    styles:{
                        display:'flex',
                        justifyContent:'center',
                        backgroundColor: ['#f1f1f1','#ccc']
                    }
                },[
                    h('scroll-view', { styles: {width:Math.min(window.innerWidth,400), height: window.innerHeight } },
                        [
                            h('view', { styles: { height: 300,position:'relative',marginBottom:10,marginTop:10,borderRadius:8 } }, [
                                h('image', { styles: { width: '100%', height: '100%', position: 'absolute',top:0,left:0 }, attrs: { src: background, mode: 'aspectFill' }, }),
                                h('view', { styles: { backgroundColor: 'rgba(255,255,255,0.5)', fontSize: 30, lineHeight: 40, padding: 10, position: 'absolute', bottom: 0, left: 0, width: '100%', textAlign: 'center'} }, [h('text', { styles: {fontWeight:700,color:'#333' } }, 'easyCanvas')])
                            ]),
                            ...list
                        ]
                    )
                ])
            })
            node.mount(layer)
            console.log(node, w, h, dpr)
        }

        // 注册全局组件
        canvas.ontouchstart = ontouchstart
        canvas.ontouchmove = ontouchmove
        canvas.ontouchend = ontouchend
        canvas.onmousedown = ontouchstart
        canvas.onmousemove = ontouchmove
        canvas.onmouseup = ontouchend
        canvas.onmousewheel = onmousewheel
    </script>
</body>

</html>